<template>
  <div>
    <a-form
      ref="FormRef"
      :model="FormState"
      :rules="FormRule"
      :labelCol="labelCol"
      :wrapperCol="wrapperCol"
    >
      <a-form-item label="推送配置" has-feedback required name="ps_id">
        <a-select v-model:value="FormState.ps_id" placeholder="请选择推送配置">
          <a-select-option v-for="d in allServer" :key="d._id" :value="d._id">
            {{ d.title }}
          </a-select-option>
          <template #notFoundContent>
            <a-empty
              image="https://img.alicdn.com/imgextra/i3/573804794/O1CN01IO097G1lHhdtoisyG_!!573804794.png"
              :image-style="{
                height: '90px'
              }"
            >
              <template #description>
                <view style="color: rgba(0, 0, 0, 0.88); padding-top: 20px">
                  暂无可选项，请先
                  <router-link :to="{ name: 'pushServer' }" target="_blank">添加</router-link>
                </view>
              </template>
            </a-empty>
          </template>
        </a-select>
      </a-form-item>
      <a-form-item label="推送标题" has-feedback required name="title">
        <a-input v-model:value="FormState.title" placeholder="请输入推送标题" />
      </a-form-item>
      <a-form-item label="推送内容" has-feedback required name="content">
        <a-textarea v-model:value="FormState.content" :rows="5" placeholder="请输入推送内容" />
      </a-form-item>
      <a-form-item label="消息类别" has-feedback required name="type">
        <a-radio-group v-model:value="FormState.type">
          <a-radio key="app" value="app">APP推送消息</a-radio>
          <a-radio key="alert" value="alert">报警(业务)通知</a-radio>
          <a-radio key="inbox" value="inbox">站内信</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item v-if="FormState.type == 'app'" label="用户标识" name="cid">
        <a-input v-model:value="FormState.cid" placeholder="用户标识，推送所有用户时值为all" />
      </a-form-item>
      <a-form-item v-if="FormState.type == 'app'" label="点击通知后续动作" name="click_type">
        <a-select v-model:value="FormState.click_type" placeholder="请选择">
          <a-select-option key="url" value="url"> 打开网页地址 </a-select-option>
          <a-select-option key="payload" value="payload"> 自定义消息内容启动应用 </a-select-option>
          <a-select-option key="startapp" value="startapp"> 打开应用首页 </a-select-option>
          <a-select-option key="none" value="none"> 纯通知，无后续动作 </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        v-if="
          FormState.type == 'app' &&
          (FormState.click_type == 'url' || FormState.click_type == 'payload')
        "
        label="动作内容参数"
        name="click_type_content"
      >
        <a-textarea
          v-model:value="FormState.click_type_content"
          :rows="5"
          placeholder="点击通知后续动作为打开网页地址时，则输入以http或https开头的url，为自定义消息内容启动应用时，本项输入自定义参数内容(json格式)"
        />
      </a-form-item>
      <a-form-item
        v-if="
          FormState.type == 'app' &&
          (FormState.click_type == 'url' || FormState.click_type == 'payload')
        "
        label="设置通知渠道重要性"
        name="channel_level"
      >
        <a-select v-model:value="FormState.channel_level" placeholder="请选择">
          <a-select-option key="0" value="0"> 无声音，无振动，不显示 </a-select-option>
          <a-select-option key="1" value="1">
            无声音，无振动，锁屏不显示，通知栏中被折叠显示
          </a-select-option>
          <a-select-option key="2" value="2">
            无声音，无振动，锁屏和通知栏中都显示，通知不唤醒屏幕
          </a-select-option>
          <a-select-option key="3" value="3">
            有声音，无振动，锁屏和通知栏中都显示，通知唤醒屏幕
          </a-select-option>
          <a-select-option key="4" value="4">
            有声音，有振动，亮屏下通知悬浮展示，锁屏通知以默认形式展示且唤醒屏幕
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item v-if="FormState.type == 'alert'" label="消息类型" name="msg_type">
        <a-select v-model:value="FormState.msg_type" placeholder="请选择">
          <a-select-option key="text" value="text"> 文本 </a-select-option>
          <a-select-option key="pic" value="pic"> 图片(钉钉机器人暂不支持) </a-select-option>
          <a-select-option key="tuwen" value="tuwen"> 图文 </a-select-option>
          <a-select-option key="markdown" value="markdown"> MarkDown </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item v-if="FormState.type == 'alert'" label="消息内容" name="msg_content">
        <a-textarea
          v-model:value="FormState.msg_content"
          :rows="5"
          placeholder='消息类型为图片时填写图片url，为图文时输入json格式数据，如{"url":\"xxx","pic":"xxx"}，为MarkDown时填写markdown文本内容'
        />
      </a-form-item>
      <a-form-item v-if="FormState.type == 'alert'" label="@用户" name="atMobiles">
        <a-textarea
          v-model:value="FormState.atMobiles"
          :rows="3"
          placeholder="@某个用户（值为该用户的手机号），同时@多个人时手机号以英文,分割，@所有人时输入all"
        />
      </a-form-item>
      <a-form-item v-if="FormState.type == 'alert'" label="短信参数" name="params_json">
        <a-textarea
          v-model:value="FormState.params_json"
          :rows="2"
          placeholder="以json格式传入，参数排序需与短信模板中的参数顺序一致，参数实例：{‘sms_code’:1234}"
        />
      </a-form-item>
      <a-form-item style="margin-left: 12.5%">
        <a-button type="primary" html-type="submit" :loading="ConfirmLoading" @click="OnSubmit">
          发送
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts">/* eslint-disable */
import { defineComponent, reactive, toRefs, onMounted, ref, toRaw } from 'vue'
import { Row, Col, Switch } from 'ant-design-vue'
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue'
import { requestSuccess, requestFailed } from '@/utils/feedback'
import { doSendPush, getAllServerList } from '@/api/push'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: 'ItemEdit',
  components: {
    PlusOutlined,
    LoadingOutlined,
    [Row.name]: Row,
    [Switch.name]: Switch,
    [Col.name]: Col
  },
  setup() {
    const FormRef = ref()
    const router = useRouter()
    const state = reactive({
      ConfirmLoading: false,
      allServer: [],
      allTpl: [],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 }
      }
    })
    const FormState = reactive({
      ps_id: '',
      title: '',
      content: '',
      cid: '',
      type: '',
      is_filter_bool: true
    })
    const FormRule = {
      ps_id: [
        { required: true, message: '请选择推送配置', trigger: ['blur', 'change'] }
      ],
      content: [
        { required: true, message: '请输入推送内容', trigger: ['blur', 'change'] }
      ],
      title: [{ required: true, message: '请输入推送标题', trigger: ['blur', 'change'] }],
      type: [{ required: false, message: '请选择消息类别', trigger: ['blur', 'change'] }]
    }
    onMounted(() => {
      getServerList()
    })
    const getServerList = () => {
      getAllServerList({}).then((res) => {
        state.allServer = res
      })
    }
    const OnSubmit = () => {
      FormRef.value
        .validate()
        .then(() => {
          doSendPush(toRaw(FormState))
            .then((res) => {
              if (res.code === 200) {
                requestSuccess(res)
              } else {
                requestFailed(res)
              }
            })
            .finally(() => {
              state.ConfirmLoading = false
            })
        })
        .catch(() => {
          return false
        })
    }
    return {
      ...toRefs(state),
      FormRef,
      getServerList,
      FormState,
      FormRule,
      OnSubmit
    }
  }
})
</script>

<style scoped></style>
